<template>
  <div class="mainbox">
    <dt-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :is-loading="loading"
               :width="'1000px'" @comfirmBtn="submitForm" @closeDialog="cancel">
      <div slot="content">
        <el-form ref="wayForm" :model="wayForm" :rules="rules"
                 label-width="84px">
          <el-form-item label="渠道名称" prop="channelName">
            <el-input v-model.trim="wayForm.channelName" placeholder="请输入渠道名称" maxlength="30"
                      show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="渠道编码" prop="channelCode">
            <el-input v-model.trim="wayForm.channelCode" placeholder="请输入渠道编码" maxlength="30"
                      show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="渠道类型" prop="channelType">
            <el-select v-model.trim="wayForm.channelType" placeholder="请选择渠道类型" style="width:100%"
                       @change="clickChannelType">
              <el-option
                v-for="dict in dict.type.channelType"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="SDK类名" prop="channelSdk">
            <el-select v-model.trim="wayForm.channelSdk" placeholder="请选择SDK类名" style="width:100%"
                       @change="clickchannelSdk">
              <el-option
                v-for="sdk in sdkList"
                :key="sdk.channelSdkCode"
                :label="sdk.channelSdkName"
                :value="sdk.channelSdkCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="wayForm.channelType!=3" label="渠道参数" prop="parameterList">
            <el-table ref="table" border highlight-current-row
                      :header-cell-style="{ backgroundColor: '#f2f2f2'}" :data="wayForm.parameterList" @row-click="rowClick">
              <template slot="empty">
                <p>{{ $store.getters.dataText }}</p>
              </template>
              <el-table-column
                fixed="left"
                type="index"
                label="序号"
                width="70"
              />
              <el-table-column label="参数名称" show-overflow-tooltip align="center"
                               prop="parameterName">
                <template slot-scope="scope">
                  <el-form-item :prop="'parameterList.'+scope.$index+'.parameterName'" :rules="rules.parameterName">
                    <el-input v-model.trim="scope.row.parameterName" type="textarea" show-word-limit
                              maxlength="32" placeholder="请输入参数名称" class="limit"
                              :autosize="{ minRows: 4, maxRows: 4}" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="值" show-overflow-tooltip align="center"
                               prop="parameterValue" width="300">
                <template slot-scope="scope">
                  <el-form-item :prop="'parameterList.'+scope.$index+'.parameterValue'" :rules="rules.parameterValue" label-width="300">
                    <el-input v-model.trim="scope.row.parameterValue" type="textarea" show-word-limit
                              maxlength="64" placeholder="请输入值" class="limit"
                              :autosize="{ minRows: 4, maxRows: 4}" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column key="parameterRemark" label="备注" show-overflow-tooltip
                               align="center" prop="parameterRemark">
                <template slot-scope="scope">
                  <el-form-item :prop="'parameterList.'+scope.$index+'.parameterRemark'" :rules="rules.parameterRemark">
                    <el-input v-model.trim="scope.row.parameterRemark" type="textarea" show-word-limit
                              maxlength="30" placeholder="请输入备注" class="limit"
                              :autosize="{ minRows: 4, maxRows: 4}" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :key="Math.random()" label="操作" fixed="right"
                               align="center" class-name="small-padding fixed-width" width="90">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    @click="delData(scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="btn">
              <el-button v-permission="['WAYMANAGE_ADDMORE_BUTTON']" type="primary" :disabled="wayForm.channelSdk==''"
                         @click="addData">添加</el-button>
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="wayForm.remark" placeholder="请输入备注" maxlength="200"
                      show-word-limit class="limit" type="textarea"
                      :autosize="{ minRows: 4, maxRows: 5}" />
          </el-form-item>
        </el-form>
      </div>
    </dt-dialog>
  </div>
</template>
<script>
import {
  checkChar,
  checkCode,
  checkParameterName,
  charParameterValue
  // checkPhone
} from '@/framework/utils/validate'
import { uuId } from '@/framework/utils/uuid'
import { sysMessageChannelDetail, addSysMessageChannel, updateSysMessageChannel, getSdk, getParameter } from '@/framework/api/messageCenter/wayManage'

export default {
  dicts: ['channelType'],
  data() {
    return {
      textMap: {
        create: '新增渠道',
        update: '修改渠道'
      },
      dialogStatus: '',
      dialogVisible: false,
      wayForm: {
        channelName: '',
        channelCode: '',
        channelType: '',
        channelSdk: '',
        parameterList: [],
        remark: ''
      },
      rules: {
        channelName: [
          { required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('渠道名称不能为空'))
              } else if (!checkChar(value)) {
                callback(new Error('请输入汉字、字母、数字或下划线'))
              } else callback()
            } }
        ],
        channelCode: [
          { required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('渠道编码不能为空'))
              } else if (!checkCode(value)) {
                callback(new Error('请输入字母、数字或下划线'))
              } else callback()
            } }
        ],
        channelType: [
          { required: true, message: '渠道类型不能为空', trigger: 'change' }
        ],
        channelSdk: [
          { required: true, message: 'SDK类名不能为空', trigger: 'change' }
        ],
        parameterList: [
          { required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (this.wayForm.parameterList.length <= 0) {
                callback(new Error('渠道参数不能为空'))
              } else callback()
            } }
        ],
        parameterName: [
          { required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('参数名称不能为空'))
              } else if (!checkParameterName(value)) {
                callback(new Error('请输入字母或数字'))
              } else callback()
            } }
        ],
        parameterValue: [
          { required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('值不能为空'))
              } else if (!charParameterValue(value)) {
                callback(new Error('请输入汉字、字母、数字、划线、下划线、@或. '))
              } else callback()
            } }
        ]
      },
      loading: false,
      sdkList: []
    }
  },
  methods: {
    open(row, type) {
      this.reset()
      if (type === 'add') {
        this.dialogStatus = 'create'
        this.wayForm.channelCode = uuId(8)
      } else {
        this.dialogStatus = 'update'
        const { channelId } = row
        sysMessageChannelDetail(channelId).then((response) => {
          this.wayForm = response.data
          getSdk({ figure: this.wayForm.channelType }).then((res) => {
            this.sdkList = res.data
          })
        })
      }
      this.dialogVisible = true
    },
    cancel() {
      this.reset()
    },
    reset() {
      this.wayForm = {
        channelName: '',
        channelCode: '',
        channelType: '',
        channelSdk: '',
        parameterList: [],
        remark: ''
      }
      this.resetForm('wayForm')
      this.sdkList = []
    },
    submitForm() {
      this.$refs.wayForm.validate((vaild) => {
        if (vaild) {
          this.loading = true
          try {
            this.wayForm.parameterList = this.wayForm.parameterList.map((res) => {
              const { channelSdk } = this.wayForm
              const { channelCode } = this.wayForm
              return { ...res, channelSdk, channelCode }
            })
            if (this.dialogStatus === 'create') {
              addSysMessageChannel(this.wayForm).then(({ data: response }) => {
                this.$dtModal.msgSuccess('新增成功')
                this.$parent.getList()
                this.dialogVisible = false
                this.loading = false
              })
            } else {
              updateSysMessageChannel(this.wayForm).then(({ data: response }) => {
                this.$dtModal.msgSuccess('修改成功')
                this.$parent.getList()
                this.dialogVisible = false
                this.loading = false
              })
            }
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    rowClick(row, event, column) {
    },
    addData() {
      const obj = {
        parameterName: '',
        parameterValue: '',
        parameterRemark: ''
      }
      this.wayForm.parameterList.push(obj)
    },
    delData(index) {
      this.$dtModal.confirm('是否确认删除该条数据吗？').then(() => {
      }).then(() => {
        this.wayForm.parameterList.splice(index, 1)
      })
    },
    clickChannelType(e) {
      this.wayForm.channelSdk = ''
      this.wayForm.parameterList = []
      getSdk({ figure: e }).then((response) => {
        this.sdkList = response.data
      })
    },
    clickchannelSdk(e) {
      this.wayForm.parameterList = []
      getParameter({ channelSdkCode: e }).then((response) => {
        this.wayForm.parameterList = response.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
 .btn{
  line-height: 56px;
  height: 56px;
  text-align: center;

  .el-button{
  // text-align: center;
    height: 30px;
    line-height: 30px;
    margin: auto;
      padding: 0 26px;
  }
}
</style>
